<template>
  <div class="app-sidebar" :class="{ 'is-collapsed': isCollapsed }">
    <el-menu
      :default-active="activeMenu"
      :collapse="isCollapsed"
      :unique-opened="true"
      :collapse-transition="false"
      class="sidebar-menu"
      background-color="var(--sidebar-background)"
      text-color="#bfcbd9"
      active-text-color="#ffffff"
    >
      <template v-for="(route, index) in routes" :key="index">
        <!-- 没有子路由的菜单项 -->
        <el-menu-item v-if="!route.children || route.children.length === 0" :index="route.path" @click="handleMenuClick(route)">
          <el-icon v-if="route.meta && route.meta.icon">
            <component :is="route.meta.icon" />
          </el-icon>
          <template #title>{{ route.meta && route.meta.title }}</template>
        </el-menu-item>
        
        <!-- 有子路由的菜单项 -->
        <el-sub-menu v-else :index="route.path">
          <template #title>
            <el-icon v-if="route.meta && route.meta.icon">
              <component :is="route.meta.icon" />
            </el-icon>
            <span>{{ route.meta && route.meta.title }}</span>
          </template>
          
          <!-- 子菜单项 -->
          <template v-for="child in route.children" :key="child.path">
            <!-- 没有孙子路由的子菜单项 -->
            <el-menu-item 
              v-if="!child.children || child.children.length === 0" 
              :index="route.path + '/' + child.path"
              @click="handleMenuClick({ path: route.path + '/' + child.path })"
            >
              <el-icon v-if="child.meta && child.meta.icon">
                <component :is="child.meta.icon" />
              </el-icon>
              <template #title>{{ child.meta && child.meta.title }}</template>
            </el-menu-item>
            
            <!-- 有孙子路由的子菜单项 -->
            <el-sub-menu v-else :index="route.path + '/' + child.path">
              <template #title>
                <el-icon v-if="child.meta && child.meta.icon">
                  <component :is="child.meta.icon" />
                </el-icon>
                <span>{{ child.meta && child.meta.title }}</span>
              </template>
              
              <!-- 孙子菜单项 -->
              <el-menu-item
                v-for="grandChild in child.children"
                :key="grandChild.path"
                :index="route.path + '/' + child.path + '/' + grandChild.path"
                @click="handleMenuClick({ path: route.path + '/' + child.path + '/' + grandChild.path })"
              >
                <el-icon v-if="grandChild.meta && grandChild.meta.icon">
                  <component :is="grandChild.meta.icon" />
                </el-icon>
                <template #title>{{ grandChild.meta && grandChild.meta.title }}</template>
              </el-menu-item>
            </el-sub-menu>
          </template>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useSidebarStore } from '@/store/sidebar'

const router = useRouter()
const route = useRoute()
const sidebarStore = useSidebarStore()

// 侧边栏折叠状态
const isCollapsed = computed(() => sidebarStore.isCollapsed)

// 当前激活的菜单
const activeMenu = computed(() => {
  // 如果当前路由设置了activeMenu，则使用
  if (route.meta.activeMenu) {
    return route.meta.activeMenu as string
  }
  return route.path
})

// 获取路由配置
const routes = ref(
  router.options.routes.filter(route => {
    // 只显示需要在侧边栏显示的路由
    return route.meta && route.meta.requiresAuth && route.meta.requiresLayout
  })
)

// 处理菜单点击
const handleMenuClick = (menu: { path: string }) => {
  router.push(menu.path)
}

// 初始化
onMounted(() => {
  sidebarStore.initFromStorage()
})
</script>

<style scoped>
.app-sidebar {
  height: 100%;
  background-color: var(--sidebar-background);
  transition: width var(--transition-duration);
  width: var(--sidebar-width);
  position: relative;
  z-index: 99;
  overflow-y: auto;
  overflow-x: hidden;
}

.app-sidebar.is-collapsed {
  width: var(--sidebar-collapsed-width);
}

.sidebar-menu {
  height: 100%;
  border-right: none;
}

.sidebar-menu:not(.el-menu--collapse) {
  width: var(--sidebar-width);
}

/* 菜单项样式 */
:deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
}

:deep(.el-menu-item.is-active) {
  background-color: var(--sidebar-active) !important;
}

:deep(.el-menu-item:hover),
:deep(.el-sub-menu__title:hover) {
  background-color: var(--sidebar-active) !important;
}

:deep(.el-sub-menu__title) {
  height: 50px;
  line-height: 50px;
}

:deep(.el-menu-item .el-icon),
:deep(.el-sub-menu__title .el-icon) {
  margin-right: 10px;
}

/* 三级菜单样式 */
:deep(.el-menu--inline .el-menu--inline) {
  padding-left: 20px;
}

/* 折叠时的样式 */
.is-collapsed :deep(.el-menu--collapse) .el-sub-menu__title span,
.is-collapsed :deep(.el-menu--collapse) .el-menu-item span {
  display: none;
}

.is-collapsed :deep(.el-menu--collapse) .el-menu-item .el-icon,
.is-collapsed :deep(.el-menu--collapse) .el-sub-menu__title .el-icon {
  margin-right: 0;
}
</style> 